<template>
  <view class="container">
    <!-- 联系信息 -->
    <view class="contact-section">
      <view class="section-title">联系我们</view>
      <view class="contact-list">
        <view class="contact-item" @click="makeCall">
          <view class="contact-icon">📞</view>
          <view class="contact-info">
            <text class="contact-label">客服热线</text>
            <text class="contact-value">{{ venue.phone || '400-123-4567' }}</text>
          </view>
          <text class="contact-arrow">></text>
        </view>
        
        <view class="contact-item" @click="copyWechat">
          <view class="contact-icon">💬</view>
          <view class="contact-info">
            <text class="contact-label">微信客服</text>
            <text class="contact-value">{{ venue.wechat || 'badminton_service' }}</text>
          </view>
          <text class="contact-arrow">></text>
        </view>
        
        <view class="contact-item" @click="openLocation">
          <view class="contact-icon">📍</view>
          <view class="contact-info">
            <text class="contact-label">场馆地址</text>
            <text class="contact-value">{{ venue.address || '北京市朝阳区体育中心路123号' }}</text>
          </view>
          <text class="contact-arrow">></text>
        </view>
        
        <view class="contact-item" @click="copyEmail">
          <view class="contact-icon">📧</view>
          <view class="contact-info">
            <text class="contact-label">邮箱地址</text>
            <text class="contact-value">{{ venue.email || 'service@badminton.com' }}</text>
          </view>
          <text class="contact-arrow">></text>
        </view>
      </view>
    </view>

    <!-- 营业时间 -->
    <view class="section" v-if="businessHours && businessHours.length > 0">
      <view class="section-title">营业时间</view>
      <view class="time-list">
        <view class="time-item" v-for="(time, index) in businessHours" :key="index">
          <text class="time-day">{{ time.day }}</text>
          <text class="time-range">{{ time.time }}</text>
        </view>
      </view>
    </view>

    <!-- 在线留言 -->
    <view class="section">
      <view class="section-title">在线留言</view>
      <view class="message-form">
        <view class="form-item">
          <text class="form-label">姓名</text>
          <input v-model="messageForm.name" placeholder="请输入您的姓名" class="form-input" />
        </view>
        
        <view class="form-item">
          <text class="form-label">手机号</text>
          <input v-model="messageForm.phone" placeholder="请输入您的手机号" class="form-input" type="number" />
        </view>
        
        <view class="form-item">
          <text class="form-label">留言类型</text>
          <picker :range="messageTypes" :value="messageForm.typeIndex" @change="onTypeChange" class="form-picker">
            <view class="picker-text">{{ messageTypes[messageForm.typeIndex] }}</view>
          </picker>
        </view>
        
        <view class="form-item">
          <text class="form-label">留言内容</text>
          <textarea v-model="messageForm.content" placeholder="请输入您的留言内容" class="form-textarea" />
        </view>
        
        <view class="form-actions">
          <view class="submit-btn" @click="submitMessage">提交留言</view>
        </view>
      </view>
    </view>

    <!-- 常见问题 -->
    <view class="section">
      <view class="section-title">常见问题</view>
      <view class="faq-list">
        <view 
          class="faq-item" 
          v-for="(faq, index) in faqList" 
          :key="index"
          @click="toggleFaq(index)"
        >
          <view class="faq-header">
            <text class="faq-question">{{ faq.question }}</text>
            <text class="faq-arrow" :class="{ expanded: faq.expanded }">▼</text>
          </view>
          <view class="faq-answer" v-if="faq.expanded">
            <text class="answer-text">{{ faq.answer }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 交通指南 -->
    <view class="section" v-if="transportation && transportation.length > 0">
      <view class="section-title">交通指南</view>
      <view class="transport-list">
        <view class="transport-item" v-for="(transport, index) in transportation" :key="index">
          <view class="transport-icon">{{ transport.icon || '🚗' }}</view>
          <view class="transport-info">
            <text class="transport-title">{{ transport.type }}</text>
            <text class="transport-desc">{{ transport.description }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer">
      <text class="footer-text">羽毛球运动中心</text>
      <text class="footer-desc">专业 · 舒适 · 便捷</text>
    </view>
  </view>
</template>

<script>
import { getVenueInfo } from '../../api/venue.js'

export default {
  data() {
    return {
      venue: {},
      businessHours: [],
      transportation: [],
      messageForm: {
        name: '',
        phone: '',
        typeIndex: 0,
        content: ''
      },
      messageTypes: ['场地预订', '会员服务', '投诉建议', '其他问题'],
      faqList: [
        {
          question: '如何预订场地？',
          answer: '您可以通过小程序首页的"立即预订"按钮进入预订页面，选择场地、日期和时间段进行预订。',
          expanded: false
        },
        {
          question: '可以提前多久预订？',
          answer: '您可以提前7天预订场地，建议提前预订以确保场地可用。',
          expanded: false
        },
        {
          question: '如何取消预订？',
          answer: '如需取消预订，请提前2小时联系客服，超时取消可能会产生费用。',
          expanded: false
        },
        {
          question: '会员有什么优惠？',
          answer: '会员享受积分加倍、生日特权、优先预订等多项优惠服务。',
          expanded: false
        },
        {
          question: '可以自带器材吗？',
          answer: '可以自带球拍等器材，场馆也提供器材租赁服务。',
          expanded: false
        }
      ]
    }
  },
  onLoad() {
    this.loadVenueInfo()
  },
  methods: {
    async loadVenueInfo() {
      try {
        const result = await getVenueInfo()
        if (result.code === 200) {
          this.venue = result.data
          this.parseJsonFields()
        }
      } catch (error) {
        console.error('加载场馆信息失败:', error)
      }
    },
    
    parseJsonFields() {
      try {
        // 解析营业时间
        if (this.venue.businessHours) {
          this.businessHours = JSON.parse(this.venue.businessHours)
        }
        
        // 解析交通指南
        if (this.venue.transportation) {
          this.transportation = JSON.parse(this.venue.transportation)
        }
      } catch (error) {
        console.error('解析JSON字段失败:', error)
      }
    },
    
    makeCall() {
      const phone = this.venue.phone || '400-123-4567'
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    
    copyWechat() {
      const wechat = this.venue.wechat || 'badminton_service'
      uni.setClipboardData({
        data: wechat,
        success: () => {
          uni.showToast({
            title: '微信号已复制',
            icon: 'success'
          })
        }
      })
    },
    
    openLocation() {
      if (this.venue.latitude && this.venue.longitude) {
        uni.openLocation({
          latitude: this.venue.latitude,
          longitude: this.venue.longitude,
          name: this.venue.name || '羽毛球运动中心',
          address: this.venue.address || '北京市朝阳区体育中心路123号'
        })
      } else {
        uni.showToast({
          title: '暂无位置信息',
          icon: 'none'
        })
      }
    },
    
    copyEmail() {
      const email = this.venue.email || 'service@badminton.com'
      uni.setClipboardData({
        data: email,
        success: () => {
          uni.showToast({
            title: '邮箱已复制',
            icon: 'success'
          })
        }
      })
    },
    
    onTypeChange(e) {
      this.messageForm.typeIndex = e.detail.value
    },
    
    submitMessage() {
      if (!this.messageForm.name.trim()) {
        uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.messageForm.phone.trim()) {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
        return
      }
      
      if (!this.messageForm.content.trim()) {
        uni.showToast({
          title: '请输入留言内容',
          icon: 'none'
        })
        return
      }
      
      // 这里可以调用API提交留言
      uni.showToast({
        title: '留言提交成功',
        icon: 'success'
      })
      
      // 清空表单
      this.messageForm = {
        name: '',
        phone: '',
        typeIndex: 0,
        content: ''
      }
    },
    
    toggleFaq(index) {
      this.faqList[index].expanded = !this.faqList[index].expanded
    }
  }
}
</script>

<style scoped>
.container {
  background: #f5f5f5;
  min-height: 100vh;
}

/* 联系信息 */
.contact-section {
  background: white;
  margin: 15px;
  border-radius: 12px;
  padding: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  position: relative;
  padding-left: 12px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: #07c160;
  border-radius: 2px;
}

.contact-list {
  display: flex;
  flex-direction: column;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  font-size: 24px;
  margin-right: 15px;
}

.contact-info {
  flex: 1;
}

.contact-label {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 3px;
}

.contact-value {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.contact-arrow {
  font-size: 16px;
  color: #999;
}

/* 通用区块 */
.section {
  background: white;
  margin: 15px;
  border-radius: 12px;
  padding: 20px;
}

/* 营业时间 */
.time-list {
  display: flex;
  flex-direction: column;
}

.time-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.time-item:last-child {
  border-bottom: none;
}

.time-day {
  font-size: 15px;
  color: #333;
}

.time-range {
  font-size: 15px;
  color: #07c160;
  font-weight: bold;
}

/* 留言表单 */
.message-form {
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 20px;
}

.form-label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  background: #f8f9fa;
}

.form-picker {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f8f9fa;
}

.picker-text {
  font-size: 14px;
  color: #333;
}

.form-textarea {
  width: 100%;
  height: 100px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  background: #f8f9fa;
}

.form-actions {
  margin-top: 20px;
}

.submit-btn {
  background: #07c160;
  color: white;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

/* 常见问题 */
.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  margin-bottom: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f8f9fa;
}

.faq-question {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  flex: 1;
  margin-right: 10px;
}

.faq-arrow {
  font-size: 12px;
  color: #999;
  transition: transform 0.3s;
}

.faq-arrow.expanded {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 15px;
  background: white;
}

.answer-text {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 交通指南 */
.transport-list {
  display: flex;
  flex-direction: column;
}

.transport-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.transport-item:last-child {
  margin-bottom: 0;
}

.transport-icon {
  font-size: 24px;
  margin-right: 15px;
}

.transport-info {
  flex: 1;
}

.transport-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.transport-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* 底部信息 */
.footer {
  text-align: center;
  padding: 30px 20px;
  background: white;
  margin: 15px;
  border-radius: 12px;
}

.footer-text {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.footer-desc {
  font-size: 14px;
  color: #666;
}
</style> 